import { Tabs, Message } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';

## `@aws-amplify/ui-react-native`

### Migrate from 1.x to 2.x
#### Installation
Install the 2.x version of `@aws-amplify/ui-react-native`, 6.x version of `aws-amplify` and 1.x version of `@aws-amplify/react-native`.

<Message colorTheme="warning" title="Upgrade both @aws-amplify/ui-react-native and aws-amplify">
The 2.x version of `@aws-amplify/ui-react-native` has a minimum dependency of 6.x on `aws-amplify` and 1.x on `@aws-amplify/react-native`. `aws-amplify@6` introduced breaking API changes and requires `@aws-amplify/react-native`.
</Message>

<Tabs.Container defaultValue='npm'>
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="npm">
    <TerminalCommand command="npm install @aws-amplify/ui-react-native@2.x aws-amplify@6.x @aws-amplify/react-native@1.x" />
  </Tabs.Panel>
  <Tabs.Panel value="yarn">
    <TerminalCommand command="yarn add @aws-amplify/ui-react-native@2.x aws-amplify@6.x @aws-amplify/react-native@1.x" />
  </Tabs.Panel>
</Tabs.Container>

#### Update and usage

`@aws-amplify/ui-react@6.x` introduces the following breaking changes:

#### 1. Updates to the Authenticator

The `initialState` property now accepts `forgotPassword` in place of `resetPassword`:

**React/React Native**
```diff
- <Authenticator initialState="resetPassword" />
+ <Authenticator initialState="forgotPassword" />
```

The corresponding key of the `components` prop has been updated to reflect the change as well:

```diff
- <Authenticator components={{ ResetPassword: MyResetPassword }} />
+ <Authenticator components={{ ForgotPassword: MyForgotPassword }} />
```

---

The `user` object provided after an end user has been authenticated has been updated to reflect the `AuthUser` interface available from `aws-amplify/auth`:

```diff
- interface AmplifyUser {
-   challengeName?: ChallengeName;
-   attributes?: CognitoAttributes;
-   username: string;  
- }
+ interface AuthUser  {
+   username: string;
+   userId: string;
+   signInDetails?: CognitoAuthSignInDetails;
+ }
```

`AuthUser` can be imported from `aws-amplify/auth`:

```ts
import { AuthUser } from 'aws-amplify/auth';
```

User attributes are now available by directly calling `fetchUserAttributes`:

```ts
import { fetchUserAttributes } from 'aws-amplify/auth';

const userAttributes = await fetchUserAttributes();
```

---

The function signatures of the `services` interface have been updated to align with the shape of the underlying `aws-amplify/auth` APIs used by the `Authenticator` and provide improved typescript support:

```diff
interface AuthenticatorProps {
  services?: {
-    getCurrentUser?: () => Promise<any>,
+    getCurrentUser?: () => Promise<AuthUser>,

-    handleSignIn?: ({ username, password, }: { username: string;password: string; }) => Promise<any>,
+    handleSignIn?: (input: SignInInput) => Promise<SignInOutput>,

-    handleSignUp?: (formData: any) => Promise<ISignUpResult>,
+    handleSignUp?: (input: SignUpInput) => Promise<SignUpOutput>,

-    handleConfirmSignIn?: ({ user, code, mfaType, }: { user: any; code: string; mfaType: ChallengeName; }) =>Promise<any>),
+    handleConfirmSignIn?: (input: ConfirmSignInInput) => Promise<ConfirmSignInOutput>,

-    handleConfirmSignUp?: ({ username, code, }: { username: string; code: string; }) => Promise<any>,
+    handleConfirmSignUp?: (input: ConfirmSignUpInput) => Promise<ConfirmSignUpOutput>,

-    handleForgotPasswordSubmit?: ({ username, code, password, }: { username: string; code: string; password:string; }) => Promise<string>),
+    handleForgotPasswordSubmit?: (input: ConfirmResetPasswordInput) => Promise<void>,

-    handleForgotPassword?: (formData: any) => Promise<any>,
+    handleForgotPassword?: (input: ResetPasswordInput) => Promise<ResetPasswordOutput>,
  }
}
```

The input and return type interfaces are available as imports from `aws-amplify/auth`:

```ts
import { ConfirmSignInInput } from 'aws-amplify';
```
